<template>
  <div class="box">
    <MyHeader :reserive="reserive"></MyHeader>
    <MyList :todoList="todoList" :changeTodo="changeTodo" :del="del"></MyList>
    <MyFooter :todoList="todoList" :clear_done="clear_done" :checkAll="checkAll"></MyFooter>
  </div>
  
</template>

<script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter'

export default {
  data(){
        return {
            todoList:[
                {id:'001',name:'吃饭',done:true},
                {id:'002',name:'学习',done:false},
                {id:'003',name:'运动',done:true}
            ]
        }
    },
  name:'App',
  components:{MyHeader,MyList,MyFooter},
  methods:{
    reserive(things){
      // console.log('输出:'+ things);
      this.todoList.unshift(things)
    },
    changeTodo(id){
      this.todoList.forEach((value)=>{
          if(value.id === id) return value.done = !value.done
      })
    },
    del(id){
      this.todoList = this.todoList.filter((value2)=>{
          return value2.id !== id
      })
    },
    clear_done(){
      this.todoList = this.todoList.filter((value3)=>{
        return !value3.done
      })
    },
    checkAll(done){
      this.todoList.forEach((value4)=>{
        value4.done = done 
      })
    }
  }
}
</script>

<style>
  body,html{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box{
    box-sizing: border-box;
    margin: 100px;
    width: 500px;
    height: 500px;
    border:1px solid;
    border-radius: 10px;
    /* width:190px; */
    background-color:bisque;
    text-align: center;
    padding-top: 110px;
  }
</style>